<template>
	<div>
		<div class="pb10px">
			<el-form ref="searchForm" :model="searchForm" inline>
				<el-form-item label="考试标题" prop="name">
					<el-input v-model="searchForm.name" clearable placeholder="请输入考试标题"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
					
				</el-form-item>
			</el-form>
		</div>
		<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
		<el-button type="danger" icon="el-icon-remove-outline" @click="batchDelete">批量删除
		</el-button>

		<el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="width: 100%"
			:header-cell-style="headClass" :cell-style="rowClass">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="name" label="考试标题"></el-table-column>
			<el-table-column label="封面图">
				<template slot-scope="scope">
					<el-image style="width: 60px; height: 60px" :src="scope.row.img"
						:preview-src-list="[scope.row.img]"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="发布状态">
				<template slot-scope="scope">
					<div v-if="scope.row.status == 1">
						<div class="greenBox">
							已发布
						</div>
					</div>
					<div v-else-if="scope.row.status != 1">
						<div class="guleBox">
							未发布
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="考试状态">
				<template slot-scope="scope">
					<div v-if="scope.row.type == '未开始'">
						<div class="guleBox">
							未开始
						</div>
					</div>
					<div v-else-if="scope.row.type == '进行中'">
						<div class="greenBox">
							进行中
						</div>
					</div>
					<div v-else-if="scope.row.type == '已结束'">
						<div class="blueBox">
							已结束
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="startTime" label="开始时间" width="200"></el-table-column>
			<el-table-column prop="endTime" label="结束时间" width="200"></el-table-column>
			<el-table-column prop="user" label="发布人"></el-table-column>
			<el-table-column label="操作" width="400" fixed="right">
				<template slot-scope="scope">
					<el-button type="success" icon="el-icon-view" @click="look(scope.row.id,scope.row.name)">
						查看详情
					</el-button>
					<el-button type="primary" @click="fabu(scope.row.id,scope.row.status)" icon="el-icon-upload"
						v-if="scope.row.status != 1">
						一键发布
					</el-button>
					<el-button type="warning" @click="fabu(scope.row.id,scope.row.status)" icon="el-icon-upload"
						v-if="scope.row.status == 1">
						取消发布
					</el-button>
					<el-button icon="el-icon-edit-outline" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" icon="el-icon-remove-outline"
						@click="handleDelete(scope.$index, scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="margin-top: 20px">
			<el-pagination @current-change="currentChange" @size-change="sizeChange" :page-size="pageInfo.pageSize"
				:current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
		<el-dialog :title="formData.id?'编辑':'新增'" :visible.sync="isDrawerDialog" size="500px" direction="rtl"
			:wrapper-closable="false">
			<div class="demo-drawer_content" style="padding-right: 40px;box-sizing: border-box">
				<el-form :model="formData" label-width="100px" class="demo-ruleForm" :rules="rules" ref="formData">
					<slot name="content">
						<el-form-item label="考试标题" prop="name">
							<el-input v-model="formData.name"></el-input>
						</el-form-item>
						<el-form-item label="封面图" prop="img">
							<el-upload style="text-align: center;padding-bottom: 10px;" :action="$httpUploadFile"
								:show-file-list="false" :on-success="uploadImgSuccess">
								<img v-if="formData.img" :src="formData.img"
									style="width: 150px;height: 150px;display: block;">
								<i v-else class="el-icon-plus"
									style="font-size: 28px;color: #8c939d;width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #ccc;"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="开考模式" prop="unify">
							<el-radio v-model="formData.unify" label="1" @input="getEndTime">统一开考</el-radio>
							<el-radio v-model="formData.unify" label="0" @input="getEndTime">时间段内自由考试</el-radio>
							<el-tag type="danger">开考前30分钟可进入考生须知页面</el-tag>
						</el-form-item>
						<el-form-item label="试卷列表" prop="examPaper">
							<el-select v-model="formData.examPaper" collapse-tags style="width:100%" placeholder="请选择"
								@change="getEndTime">
								<el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="绑定报名" prop="applicationId">
							<el-select v-model="formData.applicationId" collapse-tags style="width:100%"
								placeholder="请选择">
								<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="开始时间" prop="startTime">
							<el-date-picker v-model="formData.startTime" type="datetime"
								value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="getEndTime()">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间" prop="endTime">
							<el-date-picker v-model="formData.endTime" type="datetime"
								value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"
								:disabled="formData.unify == '1'"></el-date-picker>
						</el-form-item>
						<el-form-item label="是否发布" prop="status">
							<el-radio v-model="formData.status" label="1">发布</el-radio>
							<el-radio v-model="formData.status" label="0">不发布</el-radio>
						</el-form-item>
						<el-form-item label="切屏控制" prop="isExit">
							<el-radio v-model="formData.isExit" label="1" @change="chooseIsExit">限制切屏</el-radio>
							<el-radio v-model="formData.isExit" label="0" @change="chooseIsExit">不限制切屏</el-radio>
						</el-form-item>
						<el-form-item label="切屏次数" prop="examExitCount">
							<el-input v-model="formData.examExitCount" type="number"
								style="min-width:100px;width: 10%;" :disabled="formData.isExit == '0'"></el-input>
							<el-tag type="danger" style="margin-left: 20px;">超过设置切屏次数将自动收卷</el-tag>
						</el-form-item>
						<el-form-item label="是否允许查看成绩" prop="isSeeScore">
							<el-radio v-model="formData.isSeeScore" label="0">不允许查看</el-radio>
							<el-radio v-model="formData.isSeeScore" label="1">仅查看分数</el-radio>
							<el-radio v-model="formData.isSeeScore" label="2">查看所有(分数+试卷)</el-radio>
						</el-form-item>
						<el-form-item label="题目乱序" prop="topicSequence">
							<el-radio v-model="formData.topicSequence" label="1">乱序</el-radio>
							<el-radio v-model="formData.topicSequence" label="0">不乱序</el-radio>
						</el-form-item>
						<el-form-item label="答案乱序" prop="answerSequence">
							<el-radio v-model="formData.answerSequence" label="1">乱序</el-radio>
							<el-radio v-model="formData.answerSequence" label="0">不乱序</el-radio>
						</el-form-item>
						<!-- <el-form-item label="考试总分">
							<el-input v-model="formData.score" disabled></el-input>
						</el-form-item> -->
					</slot>
				</el-form>
			</div>
			<div class="demo-drawer_footer" style="display: flex; justify-content: space-around;">
				<el-button @click="isDrawerDialog = false">取消</el-button>
				<el-button type="primary" @click="submit('formData')">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog title="考试详情" :visible.sync="dialogTableVisible">
			<div class="kaoshiBox">
				<div style="width: 35%;">
					<el-image style="width: 100%; min-height: 150px;" :src="examList.img"
						:preview-src-list="[examList.img]">
					</el-image>
				</div>
				<div class="rightBox">
					<div class="timeBox">
						<div style="font-size: 18px;width: 50%;font-weight: bold;">考试名称：{{examList.name}}</div>
						<div style="font-size: 16px;width: 50%;">
							<el-popover placement="top" title="标题" width="400" trigger="click">
								<el-table :data="applicationList">
									<el-table-column label="序号" type="index" width="50"></el-table-column>
									<el-table-column property="username" label="姓名"></el-table-column>
									<el-table-column property="gender" label="性别"></el-table-column>
									<el-table-column property="mobile" label="手机号"></el-table-column>
									<el-table-column property="idCard" label="身份证"></el-table-column>
									<el-table-column property="email" label="邮箱"></el-table-column>
								</el-table>
								<el-button slot="reference" type="success">查看报名</el-button>
							</el-popover>
						</div>
					</div>
					<div class="timeBox">
						<div style="font-size: 16px;width: 50%;">开始时间：{{examList.startTime}}</div>
						<div style="font-size: 16px;width: 50%;">结束时间：{{examList.endTime}}</div>
					</div>
					<div class="timeBox">
						<div style="font-size: 16px;width: 50%;">报名人数：{{application_count}}</div>
						<div style="font-size: 16px;width: 50%;">实际考试人数：{{exam_count}}</div>
					</div>
					<div class="timeBox">
						<div style="font-size: 16px;width: 50%;" v-if="examList.unify == '1'">考试模式：统一开考</div>
						<div style="font-size: 16px;width: 50%;" v-if="examList.unify == '0'">考试模式：时间段内自由考试</div>
						<div style="font-size: 16px;width: 50%;" v-if="examList.answerSequence == '1'">答案是否乱序：乱序</div>
						<div style="font-size: 16px;width: 50%;" v-if="examList.answerSequence == '0'">答案是否乱序：不乱序</div>
					</div>
				</div>
			</div>
			<div style="margin-top: 50px;">
				<el-table :data="gridData" max-height="300" :header-cell-style="headClass" :cell-style="rowClass">
					<el-table-column label="序号" type="index" width="50">
					</el-table-column>
					<el-table-column property="userName" label="姓名"></el-table-column>
					<el-table-column property="isOk" label="是否交卷">
					</el-table-column>
					<el-table-column property="okTime" label="交卷时间" width="200"></el-table-column>
					<el-table-column property="isScore" label="是否评分"></el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" @click="handleDelete1(scope.$index, scope.row)">删除
							</el-button>
							<el-button size="mini" @click="addExam(scope.row.id)">强制收卷
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import utils from "@/utils/utils";
	import {
		Result
	} from "element-ui";

	export default {
		data() {
			return {
				//抽屉控制
				isDrawerDialog: false,
				dialogTableVisible: false,
				//列表数据
				listData: [],
				chooseId: '',
				tableData: [],
				visible: false,
				gridData: [],
				applicationList: [],
				examList: [],
				rules: {
					name: [{
						required: true,
						message: '请输入考试名称',
						trigger: 'blur'
					}],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change'
					}],
					endTime: [{
						required: true,
						message: '请选择结束时间',
						trigger: 'change'
					}],
					applicationId: [{
						required: true,
						message: '请选择绑定报名',
						trigger: 'change'
					}],
					examPaper: [{
						required: true,
						message: '请选择考试试卷',
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: '请选择发布状态',
						trigger: 'change'
					}],
					topicSequence: [{
						required: true,
						message: '请选择是否乱序',
						trigger: 'change'
					}],
					answerSequence: [{
						required: true,
						message: '请选择是否乱序',
						trigger: 'change'
					}],
					unify: [{
						required: true,
						message: '请选择开考模式',
						trigger: 'change'
					}],
					isSeeScore: [{
						required: true,
						message: '请选择查看成绩模式',
						trigger: 'change'
					}],
					isExit: [{
						required: true,
						message: '请选择切屏控制',
						trigger: 'change'
					}]
				},
				//总条数
				total: 0,
				application_count: 0,
				exam_count: 0,
				examPaper: [],
				flag: false,
				chooseUser: [],
				//分页详情
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				//搜索
				searchForm: {
					name: ""
				},
				formData: {
					status: '',
					sequence: '',
					isSeeScore: '0',
					isExit:'1',
					examExitCount:0
				},
				//删除数据的id
				ids: [],
				userInfo: utils.getUserInfo(),
				options: [],

			}
		},

		created() {
			this.getPageList()
			this.getExamList()
			this.getApplicationList()
		},
		mounted() {
	
		},
		beforeDestroy() {
		    
		  },
		methods: {
			//获取分页数据
			getPageList() {
				let data = Object.assign(this.searchForm, this.pageInfo)
				this.$axios.get("/exam/page", {
					params: data
				}).then(res => {
					res.data.list.forEach((item) => {
						console.log(res.data.list, '什么')
						let nowTime = parseInt(new Date().getTime())
						let startTime = parseInt(new Date(item.startTime).getTime())
						let endTime = parseInt(new Date(item.endTime).getTime())
						if (startTime > nowTime) {
							item.type = '未开始'
						} else if (startTime < nowTime && nowTime < endTime) {
							item.type = '进行中'

						} else if (nowTime > endTime) {
							item.type = '已结束'
						}
					})
					this.listData = res.data.list
					this.total = res.data.total
					console.log(55, this.listData)
				})
			},
			//强制收卷
			addExam(id) {
				this.chooseUser = this.gridData.find(obj => obj.id == id)
				console.log(this.chooseUser, 123)
				if (this.chooseUser.isOk == '否') {
					this.examPaper = JSON.parse(this.chooseUser.userAnswers)
					console.log(this.examPaper)
					for (const obj of this.examPaper) {
						if (obj.type == '简答题') {
							this.flag = true;
							break;
						}
					}
					if (this.flag == true) {
						this.chooseUser.isScore = '未评分'
					} else {
						this.chooseUser.isScore = '已评分'
					}
					console.log(this.chooseUser, '整条')
					this.getScore()
					this.saveScore()
				} else {
					this.$message('该试卷已提交')
				}

			},
			chooseIsExit(){
				console.log(this.formData.isExit)
				if(this.formData.isExit == 0){
					this.formData.examExitCount = 0
				}
			},
			//算客观题分数
			getScore() {
				this.examPaper.forEach(item => {
					if (item.type == '单项选择题' || item.type == '判断题' || item.type == '填空题') {
						if (item.userAnswer == item.answer) {
							item.userScore = item.score
						} else {
							item.userScore = 0
						}
					}
					if (item.type == '多项选择题' && item.userAnswer.length != 0) {
						const bArray = item.answer.split(',').map(arr => arr.trim());
						const setB = new Set(bArray);
						const areAllElementsInAInB = item.userAnswer.every(arr => setB.has(arr));
						if (areAllElementsInAInB == true) {
							item.userScore = item.score
						} else {
							item.userScore = 0
						}
					} else if (item.type == '多项选择题' && item.userAnswer.length == 0) {
						item.userScore = 0
					}
					if (item.type == '简答题') {
						item.userScore = 0
					}
				})
			},
			//保存收卷内容
			saveScore() {
				console.log(this.chooseUser, '记录')
				this.chooseUser.userAnswers = JSON.stringify(this.examPaper)
				this.$confirm('是否强制收卷?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.chooseUser.isOk = '是'
					this.chooseUser.okTime = this.changeTime(new Date().getTime())
					this.chooseUser.userAnswers = JSON.stringify(this.chooseUser.userAnswers)
					this.$axios.put("/score/update", this.chooseUser).then(res => {
						if (res.code == 200) {
							console.log(res)
							this.$message({
								type: 'success',
								message: '强制收卷成功!'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			//获取报名列表
			getApplicationList() {
				let searchForm = {
					name: "",
					status: ''
				}
				let pageInfo = {
					pageNum: 1,
					//分页大小
					pageSize: 10000
				}
				let data = Object.assign(searchForm, pageInfo)
				this.$axios.get("/application/page", {
					params: data
				}).then(res => {
					console.log(123, res)
					this.options = res.data.data
				})
			},
			changeEndTime() {
				console.log(123)
				// this.formData.startTime = ''
				// this.formData.endTime = ''
			},
			getEndTime() {
				if (this.formData.unify == '1') {
					let res = this.tableData.find(obj => obj.id == this.formData.examPaper)
					let endTime = this.changeDate(this.formData.startTime) + res.examTime * 60000
					this.$set(this.formData, 'endTime', this.changeTime(endTime));
				}
			},
			//年月日时分秒转时间戳
			changeDate(dateTimeString) {
				const year = parseInt(dateTimeString.substring(0, 4), 10);
				const month = parseInt(dateTimeString.substring(5, 7), 10) - 1;
				const day = parseInt(dateTimeString.substring(8, 10), 10);
				const hours = parseInt(dateTimeString.substring(11, 13), 10);
				const minutes = parseInt(dateTimeString.substring(14, 16), 10);
				const seconds = parseInt(dateTimeString.substring(17, 19), 10);

				// 创建Date对象  
				const date = new Date(year, month, day, hours, minutes, seconds);
				return date.getTime();
			},
			//时间戳转年月日时分秒
			changeTime(currentTime) {
				// 提取并格式化年、月、日、时、分、秒  
				let date = new Date(currentTime);
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1  
				let day = String(date.getDate()).padStart(2, '0');
				let hours = String(date.getHours()).padStart(2, '0');
				let minutes = String(date.getMinutes()).padStart(2, '0');
				let seconds = String(date.getSeconds()).padStart(2, '0');

				// 将格式化后的年、月、日、时、分、秒拼接成完整的日期时间字符串  
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			look(id) {
				if (id) {
					this.chooseId = id
				}
				this.$axios.get("/exam/getExamInfoById?id=" + this.chooseId).then(res => {
					console.log(res)
					this.gridData = res.data.exam_info
					this.application_count = res.data.application_count
					this.exam_count = res.data.exam_count
					this.applicationList = res.data.application_info
				})
				this.$axios.get("/exam/getById?id=" + id).then(result => {

					this.examList = result.data
					this.dialogTableVisible = true
					console.log('考试', this.examList)
				})
			},
			fabu(id, status) {
				this.formData = {}
				console.log(status)
				this.$confirm('确认该操作吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.formData.id = id
					if (status != 1) {
						this.formData.status = 1
						this.$message({
							type: 'success',
							message: '发布成功!'
						});
					} else if (status == 1) {
						this.formData.status = 0
						this.$message({
							// type: 'success',
							message: '已取消发布'
						});
					}
					this.$axios.put("/exam/update", this.formData).then(res => {
						if (res.code === 200) {
							this.isDrawerDialog = false
							this.getPageList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			getExamList() {
				let searchForm = {
					name: "",
				}
				let pageInfo = {
					pageNum: 1,
					//分页大小
					pageSize: 10000
				}
				let data = Object.assign(searchForm, pageInfo)
				this.$axios.get("/examPaper/page", {
					params: data
				}).then(res => {
					console.log('sad', res)
					this.tableData = res.data.data
					this.tableData.forEach(item => {
						if (item.questionId != null) {
							item.count = item.questionId.split(',')
							item.count = item.count.length
						} else {
							item.count = 0
						}

						// item.count = item.count.length
					})
				})
			},
			cleanForm() {
				this.$refs['formData'].resetFields();
			},
			// getScore(){

			// 	this.tableData.forEach(item=>{
			// 		if(item.id == this.formData.examPaper){
			// 			this.formData.score = item.score
			// 		}
			// 	})
			// },
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
			},
			//搜索
			handleSearch() {
				this.pageInfo.pageNum = 1
				this.getPageList()
			},
			//提交数据
			submit(formData) {
				//新增
				if (!this.formData.id) {
					this.$refs[formData].validate((valid) => {
						if (valid) {
							this.$axios.post("/exam/add", this.formData).then(res => {
								if (res.code === 200) {
									this.isDrawerDialog = false
									this.$message({
										message: res.msg,
										type: 'success'
									});
									this.getPageList()

								}
							})
						}
					});

				} else {
					//更新
					this.$axios.put("/exam/update", this.formData).then(res => {
						if (res.code === 200) {
							this.isDrawerDialog = false
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.getPageList()
						}
					})
				}
			},
			//添加数据
			handleAdd() {
				this.formData = {}
				this.isDrawerDialog = true
				this.cleanForm()
			},
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center;font-size:13px;"
			},
			//编辑
			handleEdit(index, row) {
				this.formData = Object.assign({}, row)
				console.log(this.formData)
				this.isDrawerDialog = true
			},
			//单个删除
			handleDelete1(index, row) {
				console.log(row)
				this.delScore([row])
			},
			delScore(rows) {
				if (!rows) {
					rows = this.$refs.multipleTable.selection;
				}
				let ids = rows.map(item => item.id);
				this.$confirm(`此操作将永久删除ID为[${ids}]的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					//批量删除数据
					this.$axios.delete("/score/delBatch", {
						data: ids
					}).then(res => {
						if (res.code === 200) {
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.look()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					this.$refs.multipleTable.clearSelection();
				});
			},
			//单个删除
			handleDelete(index, row) {
				this.batchDelete([row])
			},
			//批量删除
			batchDelete(rows) {
				if (!rows) {
					rows = this.$refs.multipleTable.selection;
				}
				let ids = rows.map(item => item.id);
				this.$confirm(`此操作将永久删除ID为[${ids}]的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					//批量删除数据
					this.$axios.delete("/exam/delBatch", {
						data: ids
					}).then(res => {
						if (res.code === 200) {
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.getPageList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					this.$refs.multipleTable.clearSelection();
				});
			},
			uploadImgSuccess(res) {
				this.$set(this.formData, "img", res.data.url)
			}
		}
	};
</script>

<style scoped>
	.greenBox {
		background-color: #67C23A;
		border-radius: 5px;
		color: white;
	}

	.titleBox {
		font-size: 18px;
		font-weight: bold;
	}

	.rightBox {
		font-size: 16px;
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15px 10px;
	}

	.timeBox {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.kaoshiBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-shadow: 0px 0px 5px 2px gainsboro;
		border-radius: 5px;
	}

	.guleBox {
		background-color: #909399;
		border-radius: 5px;
		color: white;
	}

	.blueBox {
		background-color: #409EFF;
		border-radius: 5px;
		color: white;
	}
</style>
